import React, { Component } from 'react'
// 导入mobx-react
import { inject, observer } from 'mobx-react';
// 导入样式文件
import '../assets/css/brand.css';

@inject('store') @observer
export default class BrandList extends Component {
    state = {
        // 和品牌输入框实现双向数据绑定
        name: '',
        // 当前被编辑的品牌对
        current: {}
    }

    UNSAFE_componentWillMount(){
        this.props.store.brandListInit();
    }

    // 删除品牌
    del(id) {
        if(!window.confirm('确认删除?')){
            return false;
        }
        this.props.store.brandDel(id);
    }
    submit(event) {
        if (event.keyCode === 13) {
            if (this.state.name.trim() === '') {
                return window.alert('请输入品牌名称');
            }

            if (this.state.current.id > 0) {
                this.update();
            } else {
                this.add();
            }
            // 重置表单
            this.setState({ name: '' });
        }

    }

    // 品牌更新
    update() {
        const { id } = this.state.current;
        const { name } = this.state;
        this.props.store.brandUpdate({ id, name })
        // 重置数据
        this.setState({ current: {} });
    }

    // 添加品牌
    add() {
        this.props.store.brandAdd(this.state.name);
    }
    edit({ ...row }) {
        this.setState({ current: row, name: row.name });
    }
    // 手动同步数据
    nameChange(e) {
        this.setState({
            name: e.target.value
        });
    }
    render() {
        let { brandList } = this.props.store;
        return (
            <div className="container">
                <h1>mobx版品牌管理-{this.props.store.brandCount}</h1>
                <div className="line"></div>
                <div className="form-group">
                    <input onKeyUp={(e) => this.submit(e)} onChange={(e) => this.nameChange(e)} value={this.state.name} type="text" className="form-control" placeholder="品牌名称" />
                </div>
                <div className="line"></div>
                <table>
                    <thead>
                        <tr className="active">
                            <th>id</th>
                            <th>品牌名称</th>
                            <th>添加时间</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        {
                            brandList.map(item => {
                                return <tr key={item.id}>
                                    <td>{item.id}</td>
                                    <td>{item.name}</td>
                                    <td>{new Date(item.ctime).toLocaleDateString()}</td>
                                    <td>
                                        <button onClick={() => this.edit(item)} className="btn success">编辑</button>
                                        <button onClick={() => { this.del(item.id) }} className="btn danger">删除</button>
                                    </td>
                                </tr>
                            })
                        }
                    </tbody>
                </table>
            </div>
        )
    }
}
